<template>
  <header
    :gutter="0"
    class="topbar"
  >
    <div class="topbar-wrapper">
      <div class="left">
        <!-- 位置信息 -->
        <geo />
        <!-- 用户注册、登录 -->
        <user />
      </div>
      <!-- 未定义 -->
      <nav-bar />
    </div>
  </header>
</template>

<script>
import Geo from './geo.vue'
import User from './user.vue'
import NavBar from './nav.vue'

export default {
  components: {
    Geo,
    User,
    NavBar
  }
}
</script>

<style lang="stylus" scoped>
  // @import '~@/assets/stylus/public/header/index.styl'
  @import '~@/assets/stylus/variable.styl'
  .topbar
    width 100%
    height 40px
    background-color $bg-color
    color $text-color-gray
    font-size 12px
    .topbar-wrapper
      display flex
      justify-content space-between
      align-items center
      width 1190px
      height 100%
      margin 0 auto 
    @media screen and (max-width: 1200px)
      .topbar-wrapper
        width 960px !important

</style>
